<template>
  <!--
  el-upload 属性介绍
  1,list-type="picture-card"  设置上传组件的样式 为 照片墙

  2,action 必填 本身用于设置图片服务器的地址,将来ele会帮你自动发送请求到指定的图片服务器!!
  我们将来手动自己发送请求上传图片!!
  为了不报错 可以先写 '' 或者 #

  3,file-list属性 设置上传组件的默认展示图片  是个数组,里面是一个个对象,每个对象就是一张图片,必须要有url属性

  4. on-preview 配置是将来点击+号预览时需要触发的函数
        必须配置该属性 才有+号!!

  5. limit  传一个数字 用于限制最大上传数量

  6. on-remove 配置一个函数 将来在点击删除时 自动触发

  7. http-request 配置一个函数,走我们自己的请求逻辑 覆盖默认的上传行为，可以自定义上传的实现

  8. on-change 配置一个函数 添加文件、上传成功和上传失败时都会被调用

  9. before-upload 配置一个函数 用于文件校验
 -->
  <div>
    <el-upload
      action=""
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePreview"
      :limit="count"
      :class="{disabled:disabled}"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog title="图片预览" :visible="showImg" @close="showImg=false">
      <img :src="imgSrc" alt="" style="width:100%">
    </el-dialog>

  </div>
</template>

<script>
// 1,下载 yarn add cos-js-sdk-v5
// 2,引入 包cos-js-sdk-v5
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
// 3,创建实例
const cos = new COS({
  SecretId: 'AKID2whMu584xiutd8SfjeS3QYXKtGTBi2BD', // 身份识别ID
  SecretKey: '52mQzNkz1tlaIB3lLkwzQgkaAWgjdLtL' // 身份秘钥
})
export default {
  name: 'ImageUpload',
  props: {
    count: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList:
        [

        ],
      showImg: false,
      imgSrc: ''

    }
  },
  computed: {
    disabled() {
      return this.fileList.length >= this.count
    },
    isAllUpload() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    // 预览图片
    handlePreview(file) {
      console.log('点击图片了')
      this.showImg = true
      this.imgSrc = file.url
    },
    // 删除图片
    handleRemove(file, fileList) {
      // console.log('准备删除函数')
      // file => 将要删除的图片
      // fileList => 结构中的图片列表
      // this.fileList => 自己维护的数据层面的图片列表
      // 点击删除时,仅仅是结构被删除了,但是输数据没有删!! => 矛盾点:数据没更新 => 更新一下自己的this.fileList

      // 1,利用结构中的图片列表(自动更新)
      // this.fileList = [...fileList] //数据独立

      // 2,手动过滤
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    // 覆盖默认的上传行为，可以自定义上传的实现
    handleUpload({ file }) {
      // obj.file => 待上传的文件
      console.log('去上传吧', file) // 需要我们自己实现请求上传图片

      const fileObj = this.fileList.find(item => item.uid === file.uid)

      fileObj.status = 'uploading'// 开启进度条

      // 4,发送请求
      cos.putObject({
        Bucket: 'hrsaas-102-1314876287', // 完整的储存桶名称
        Region: 'ap-shanghai', // 储存桶所在的地域
        Key: parseInt(Math.random() * 999999) + file.name, // 设置图片储存的名字
        Body: file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        // 用于进度条
        onProgress: (progressData) => {
          // progressData 就是一个对象 里面存了当前上传的进度
          // 图片每上传一丢丢, 这个函数就会执行一次
          console.log(JSON.stringify(progressData))
          fileObj.percentage = parseInt(progressData.percent * 100)
        }
      }, function(err, data) {
        // 成功/失败 时 都会执行
        if (err) {
          console.log(err)
          return
        }
        console.log(data)

        // 防止网络太快 看不到进度条 手动做个延时
        setTimeout(() => {
          fileObj.status = 'success' // 更新状态
        }, 1000)
        fileObj.url = 'http://' + data.Location // 更新路径
      })
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      this.fileList = [...fileList]
    },
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    beforeUpload(file) {
      // 一般在这里对即将上传的文件对象做校验
      // 控制图片大小 你希望通过校验 return true; 不通过校验  return false  意味着不会执行上传
      const flag = file.size / 1024 / 1024 < 1
      if (!flag) {
        this.$message.error('文件大小不能超过1')
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled{
  ::v-deep{
    .el-upload--picture-card{
      display: none;
    }
  }
}

</style>
